//创建一个路由器 并暴露出去
//1,引入
import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";
//引入一个个可能要呈现的组件
import Home from "@/pages/Home.vue";
import News from "@/pages/News.vue";
import About from "@/pages/About.vue";
import Detail from "@/pages/Detail.vue";

//2,创建路由器
const router = createRouter({
  history: createWebHistory(), //路由器的工作模式
  routes: [
    //一个个的路由规则
    {
      name: "zhuye",
      path: "/home",
      component: Home,
    },
    {
      name: "xinwen",
      path: "/news",
      component: News,
      children: [
        {
          name: "xiangqing",
          path: "detail", //子级前面不用写 /  //提前占位  ?配置参数的必要性
          component: Detail, //表示是路由组件
          //1.把路由收到的所有params参数作为props传递给组件  只能处理params参数
          // props: true,

          //2.函数写法：可以自己决定将什么作为props给路由组件 query 或 params 都行
          // props(参数) 参数为路由信息
          props(route) {
            return route.query;
          },

          //3.对象写法  用的少
          // props:{
          //   a:100,
          //   b:200
          // }
        },
      ],
    },
    {
      name: "guanyu",
      path: "/about",
      component: About,
    },
    {
      path: "/",
      redirect: "/home",
    },
  ],
});

//暴露出去router
export default router;
